<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>搜索界面</title>
    <script src="/static/js/ku/jquery.min.js"></script>
    <script src="/static/js/echarts.js"></script>
    <script src="/static/js/ku/china.js"></script>
    <style>#china-map {
        width: 1000px;
        height: 1000px;
        margin: auto;
    }</style>
</head>
<body>
<div id="china-map"></div>
<script>
    myChart = echarts.init(document.getElementById('china-map'));
    option = {
        title: {
            text: '地图觅景',
            x: 'center'
        },
        visualMap: {//颜色的设置  dataRange
            x: 'left',
            y: 'center',
            splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ],
            text: ['多', '少'],// 文本，默认为数值文本
        },
        roamController: {//控制地图的上下左右放大缩小 图上没有显示
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [
            {
                name: '地点',
                type: 'map',
                mapType: 'china',
                roam: true,//是否开启鼠标缩放和平移漫游
                itemStyle: {//地图区域的多边形 图形样式
                    normal: {//是图形在默认状态下的样式
                        label: {
                            show: true,//是否显示标签
                            textStyle: {
                                color: "black"
                            }
                        }
                    },
                    emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label: {show: true}
                    }
                },
                top: "3%",//组件距离容器的距离
                data: [
                    {name: '北京', value: Math.round(Math.random() * 2000)},
                    {name: '天津', value: Math.round(Math.random() * 2000)},
                    {name: '上海', value: Math.round(Math.random() * 2000)},
                    {name: '重庆', value: Math.round(Math.random() * 2000)},
                    {name: '河北', value: Math.round(Math.random() * 2000)},
                    {name: '河南', value: Math.round(Math.random() * 2000)},
                    {name: '云南', value: Math.round(Math.random() * 2000)},
                    {name: '辽宁', value: Math.round(Math.random() * 2000)},
                    {name: '黑龙江', value: Math.round(Math.random() * 2000)},
                    {name: '湖南', value: Math.round(Math.random() * 2000)},
                    {name: '安徽', value: Math.round(Math.random() * 2000)},
                    {name: '山东', value: Math.round(Math.random() * 2000)},
                    {name: '新疆', value: Math.round(Math.random() * 2000)},
                    {name: '江苏', value: Math.round(Math.random() * 2000)},
                    {name: '浙江', value: Math.round(Math.random() * 2000)},
                    {name: '江西', value: Math.round(Math.random() * 2000)},
                    {name: '湖北', value: Math.round(Math.random() * 2000)},
                    {name: '广西', value: Math.round(Math.random() * 2000)},
                    {name: '甘肃', value: Math.round(Math.random() * 2000)},
                    {name: '山西', value: Math.round(Math.random() * 2000)},
                    {name: '内蒙古', value: Math.round(Math.random() * 2000)},
                    {name: '陕西', value: Math.round(Math.random() * 2000)},
                    {name: '吉林', value: Math.round(Math.random() * 2000)},
                    {name: '福建', value: Math.round(Math.random() * 2000)},
                    {name: '贵州', value: Math.round(Math.random() * 2000)},
                    {name: '广东', value: Math.round(Math.random() * 2000)},
                    {name: '青海', value: Math.round(Math.random() * 2000)},
                    {name: '西藏', value: Math.round(Math.random() * 2000)},
                    {name: '四川', value: Math.round(Math.random() * 2000)},
                    {name: '宁夏', value: Math.round(Math.random() * 2000)},
                    {name: '海南', value: Math.round(Math.random() * 2000)},
                    {name: '台湾', value: Math.round(Math.random() * 2000)},
                    {name: '香港', value: Math.round(Math.random() * 2000)},
                    {name: '澳门', value: Math.round(Math.random() * 2000)}
                ]
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        dataIndex = params.dataIndex;
        console.log(params);
    });

    myChart.on('click', function (params) {
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    });
</script>
</body>
</html>